<template>
  <!-- <nav>
    <router-link to="/">Home</router-link> 
    <router-link to="/about">About</router-link>
  </nav> -->
  <header>
    <div class="header-left">
      <img src="https://spcn-webfront.skypixel.com/skypixel/v2/public/assets/images/logo-cn.00c32c62.svg" alt="">
    </div>
    <div class="header-center">
      <router-link to="/">首页</router-link>
      <router-link to="/ts">探索</router-link>
      <router-link to="/bq">标签</router-link>
      <router-link to="/sss">摄影师</router-link>
      <router-link to="/qy">签约摄影师招募</router-link>
      <router-link to="/active">热门活动</router-link>
      <router-link to="/sky">天空之城&周年影像大赛
        <img src="https://spcn-webfront.skypixel.com/skypixel/v2/public/assets/images/hot-tag.77bd1bdf.svg" alt="">
      </router-link>
    </div>
    <div class="header-right"></div>
  </header>
  <router-view />
</template>




<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

// nav {
//   padding: 30px;

//   a {
//     font-weight: bold;
//     color: #2c3e50;

//    
//   }
// }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

.router-link-exact-active {
  color: #fff !important;
  font-weight: 700;
}

header {
  width: 100%;
  height: 60px;
  background-color: #000000;
  display: flex;
  justify-content: space-between;
  padding: 0 40px;

  .header-left {
    width: 96px;
    height: 100%;
    display: flex;
    align-items: center;

    img {
      width: 100%;
      height: 18px;
    }
  }

  .header-center {
    width: 1025px;
    height: 60px;

    a {
      display: inline-block;
      margin: 0 10px;
      height: 100%;
      color: gray;
      line-height: 60px;
      font-size: 14px;

      img {
        width: 32px;
        height: 20px;
        vertical-align: -5px;
      }
    }

    a:hover {
      color: #fff;
      font-weight: 700;
    }
  }

  .header-right {
    width: 132px;
    height: 100%;
  }
}
</style>
